<template>
	<div :class="$style.wrapper">
		<span :class="$style.label">
			{{ showDelegatePrice ? '限价委托' : '市价委托' }}
			<delegate-picker
				:title="delegateTitle"
				v-on:changeDelegateText="changeDelegateText"/>
		</span>

		<input
			type="number"
			:step="priceLength === 3 ? '0.001' : '0.01'"
			placeholder="输入价格"
			@input="changePrice"
			v-if="showDelegatePrice"
			:value="delegatePrice"
			:class="$style.price">

		<input
			:class="$style.price"
			v-if="!showDelegatePrice"
			style="fontSize: 15px"
			disabled
			:value="delegateText"/>

		<div
			:class="$style.minus"
			v-if="showDelegatePrice"
			:style="minusStyle"
			@click="minus">
			<p :class="$style.symbol">一</p>
			<p :class="$style.num">{{ priceLength === 3 ? '0.001' : '0.01' }}</p>
		</div>

		<div
			:class="$style.plus"
			v-if="showDelegatePrice"
			:style="plusStyle"
			@click="plus">
			<p :class="$style.symbol">十</p>
			<p :class="$style.num">{{ priceLength === 3 ? '0.001' : '0.01' }}</p>
		</div>
	</div>
</template>

<script>
	import RemoteDAO from '../../../common/remoteDAO'
	import LocalDAO from '../../../common/localDAO'
	import DelegatePicker from './DelegatePicker'
	const CommonUtil = require('../../../common/common.util')

	export default {

		props: {
			gameid: {
				type: String,
				default: ''
			}
		},

		components: {
			DelegatePicker
		},

		data () {
			return {
				showText: '限价委托'
			}
		},

		computed: {

			delegateType () {
				return this.$store.state.buyDelegateType
			},

			delegateText () {
				const marketCd = this.$store.state.buyStockMarket
				const delegateType = this.$store.state.buyDelegateType
				const arr = CommonUtil.getTradeTypes('buy', marketCd !== 'SH' ? '0' : '1')

				return arr.find(tt => tt.value == delegateType).showText
			},

			delegatePrice () {
				const { buyPrice1 = '0.00' } = this.$store.state.buyFivePrices

				return parseFloat(this.$store.state.buyDelegatePrice).toFixed(buyPrice1.split('.')[1].length === 3 ? 3 : 2)
			},

			priceLength () {
				const { buyPrice1 = '0.00' } = this.$store.state.buyFivePrices

				return buyPrice1.split('.')[1].length === 3 ? 3 : 2
			},

			groupId () {
				return this.$store.state.buyGroupId
			},

			delegateTitle () {
				const market = this.$store.state.buyStockMarket
				if (!market) {
					return '请选择委托方式'
				} else if (market === 'SH') {
					return '请选择委托方式（上海）'
				} else {
					return '请选择委托方式（深圳）'
				}
			},

			showDelegatePrice () {
				return this.$store.state.buyDelegateType == '0'
					|| this.$store.state.buyDelegateType == '1'
					|| this.$store.state.buyDelegateType == ''
			},

			minusStyle () {
				const gameId = this.gameid
				return { backgroundColor: !!gameId ? 'rgb(209, 50, 0)' : 'rgba(0, 0, 0, 0.2)' }
			},

			plusStyle () {
				const gameId = this.gameid
				return { backgroundColor: !!gameId ? 'rgb(209, 50, 0)' : 'rgba(0, 0, 0, 0.2)' }
			}
		},

		watch: {

			groupId (val) {
				const marketCd = this.$store.state.buyStockMarket === 'SH' ? '1' : '0'
				if (this.$store.state.buyStockCode.length !== 6 || this.delegatePrice == 'NaN') return

				RemoteDAO.callJCL11114({
					clientId: LocalDAO.getUserCode(),
					stockCode: this.$store.state.buyStockCode,
					entrustBs: this.showDelegatePrice ? '1' : this.delegateType,
					marketCd,
					groupId: val === 'default' ? '' : val,
					gameId: this.gameid,
					tradePrice: this.showDelegatePrice ? this.delegatePrice : 0
				}, resp => {
					if (resp.error == '0') {
						const decryptData = JSON.parse(decrypt.json2(resp.data))
             this.$store.dispatch('setBuyEnableVol', decryptData.body.enable_vol)
					} else {
						this.$store.dispatch('setTip', { text: resp.data })
					}
				})
			},

			delegatePrice (val) {
				const marketCd = this.$store.state.buyStockMarket === 'SH' ? '1' : '0'
				const groupId = this.$store.state.buyGroupId === 'default' ? '' : this.$store.state.buyGroupId
				if (this.$store.state.buyStockCode.length !== 6 || val == 'NaN') return

				RemoteDAO.callJCL11114({
					clientId: LocalDAO.getUserCode(),
					stockCode: this.$store.state.buyStockCode,
					entrustBs: this.showDelegatePrice ? '1' : this.delegateType,// 限价委托方式,1表示买入
					marketCd, // 上海交易所
					groupId, // 组合名称，默认我的股票
					gameId: this.gameid,
					tradePrice: this.showDelegatePrice ? this.delegatePrice : 0
				}, resp => {
					if (resp.error == "0") {
              const decryptData = JSON.parse(decrypt.json2(resp.data))
              this.$store.dispatch('setBuyEnableVol', decryptData.body.enable_vol)
          } else {
          	this.$store.dispatch('setTip', { text: resp.data })
          }
				})
			},

			delegateType (val) {
				const marketCd = this.$store.state.buyStockMarket === 'SH' ? '1' : '0'
				const groupId = this.$store.state.buyGroupId === 'default' ? '' : this.$store.state.buyGroupId
				if (this.$store.state.buyStockCode.length !== 6 || this.delegatePrice == 'NaN') return

				RemoteDAO.callJCL11114({
					clientId: LocalDAO.getUserCode(),
					stockCode: this.$store.state.buyStockCode,
					entrustBs: this.showDelegatePrice ? '1' : this.delegateType ,// 限价委托方式,1表示买入
					marketCd, // 上海交易所
					groupId,  // 组合名称，默认我的股票
					gameId: this.gameid,
					tradePrice: this.showDelegatePrice ? this.delegatePrice : 0
				}, resp => {
					if (resp.error == "0") {
              const decryptData = JSON.parse(decrypt.json2(resp.data))
              this.$store.dispatch('setBuyEnableVol', decryptData.body.enable_vol)
          } else {
          	this.$store.dispatch('setTip', { text: resp.data })
          }
				})
			}

		},

		methods: {
			minus () {
				const step = this.priceLength === 3 ? 0.001 : 0.01
				this.$store.dispatch('setBuyDelegatePrice'
					, (parseFloat(this.delegatePrice) - step).toFixed(this.priceLength))
			},

			plus () {
				const step = this.priceLength === 3 ? 0.001 : 0.01
				this.$store.dispatch('setBuyDelegatePrice'
					, (parseFloat(this.delegatePrice) + step).toFixed(this.priceLength))
			},

			changePrice (e) {
				this.$store.dispatch('setBuyDelegatePrice', e.target.value)
			},

			changeDelegateText (showText) {
				this.showText = showText
			}

		}
	}
</script>

<style module lang="less">

	.wrapper {
		display: -webkit-box;
		margin: 6px 0;
	}

	.label {
		color: #fff;
		display: inline-block;
		font-size: 14px;
		height: 40px;
		line-height: 45px;
		position: relative;

		img {
			position: absolute;
			right: -20px;
			top: 50%;
			width: 15px;
			margin-top: -7px;
		}
	}

	.price {
		display: block;
		border: none;
		margin-left: 25px;
		font-size: 16px;
		height: 20px;
		line-height: 20px;
		margin-top: 12px;
		color: #fff;
		background: transparent;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		-webkit-box-flex: 1;

		&::-webkit-input-placeholder {
			color:#ffffff;
			opacity: 0.8;
			font-size: 15px;
			line-height: 20px;
		}
	}

	.minus, .plus {

		border-radius: 99px;
		background: rgba(0, 0, 0, 0.2);
		width: 30px;
		height: 30px;
		margin: 0 3px;
		padding: 2px;
		box-sizing: content-box;

		-webkit-tap-highlight-color: #fff;

		&:active {
			background-color: #fff;

			p {
				color: #6ba9af;
			}
		}

		p {
			margin: 0;
			text-align: center;
			color: #fff;
			-webkit-tap-highlight-color: #6ba9af;
		}
	}

	.symbol {
		font-size: 10px;
		height: 12px;
		line-height: 12px;
	}

	.num {
		font-size: 12px;
		height: 16px;
		line-height: 16px;
	}
</style>
